<template>
  <div class="user-container">
    <Header :title='title' :titleDes='crumb'></Header>
    <div class="body">
      <Row :gutter="30">
        <Col span="16">
        <fieldset class="test_field">
          <legend>考试题目</legend>
          <div>
            <div class="test1">{{test.test1}} </div>
            <div class="test2">{{test.test2}} </div>
            <div class="test3">{{test.test3}} </div>
            <div class="test3">{{test.test4}} ({{test.titleType===2?'多选题':(test.titleType===1?'单选题':'判断题')}}): </div><span style="display:none">{{test.test6}}</span>
            <div class="test4">
              <div v-if="test.titleType!==3">
                <div v-for="item in test.evaluationOrderQuestionAnswerVoList" v-bind:key="item.index" class="test4_item">
                  {{item.answerContent}}
                </div>
              </div>
              <div class="choice"> 请选择
                <Button :class="choiceClass(item)" v-for="item in test.evaluationOrderQuestionAnswerVoList" v-bind:key="item.index" @click="answer(item,test)"> {{item.answerContent.substr(0,1)}} </Button>
              </div>
            </div>
          </div>
        </fieldset>
        </Col>
        <Col span="8">
        <fieldset class="progress_field">
          <legend>填写进度</legend>
          <div class="progress_container">
            <div v-for="item in examlist" :key="item.id">
              <div class="progress_title"> {{item.titleSeq}}、{{item.evaluationTitle}} </div>
              <div v-for="iitem in item.evaluationOrderQuestionChildList" :key="iitem.id" class="progress_title1"> {{iitem.titleSeq}} {{iitem.evaluationTitle}}
                <div v-for="iiitem in iitem.evaluationOrderQuestionChildList" :key="iiitem.id" class="progress_title2"> {{iiitem.evaluationTitle===''?'':iiitem.titleSeq}} {{iiitem.evaluationTitle}}
                  <div class="progress">
                    <span :class="'progress_item'+(isAnswered(iiiitem)?' current_progess_item':'')" :id="'item'+iiiitem.index" :ref="'item'+iiiitem.index" v-for="(iiiitem, i4) in iiitem.evaluationOrderQuestionChildList" @click="setTestItem(item,iitem,iiitem,iiiitem)" :key="iiiitem.id">{{i4+1}} </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        </Col>
      </Row>
      <div class="operate">
        <ButtonGroup>
          <Button v-if="!isSubmited" class="operate_item" @click="submit" type="success"> 提交问卷 </Button>
          <Button class="operate_item" @click="pre" value="pre"> 上一题 </Button>
          <Button class="operate_item" @click="next" value="next"> 下一题 </Button>
        </ButtonGroup>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import { Component, Vue, Watch } from 'vue-property-decorator'
import ajax from '../lib/ajax'
import _ from 'lodash'

@Component({
  components: {
    Header,
    Footer
  }
})

export default class User extends Vue {
  title = ''
  crumb = [{ title: '个人中心', link: '/Home' }, { title: '申请评级', link: '/User?id=4' }, { title: '填写问卷', link: '/User/LevelTest' }]

  currentIndex = 1
  isSubmited = false
  test = {
    test6: 0
  }

  answer(item, test) {
    // titleType 1单选，2多选，3单选是否
    console.log('answer', item)
    console.log('test', test)
    if (this.isSubmited) return
    const titleType = test.titleType
    let answerIds = ''

    test.evaluationOrderQuestionAnswerVoList.forEach(t1 => {
      if (t1.answerId === item.answerId) {
        if (t1.answerSelfEvaluatorSelect === 0) {
          t1.answerSelfEvaluatorSelect = 1
        } else {
          t1.answerSelfEvaluatorSelect = 0
        }
      } else if (titleType !== 2) {
        t1.answerSelfEvaluatorSelect = 1
      }
    })

    this.examlist.forEach(t1 => {
      t1.evaluationOrderQuestionChildList.forEach(t2 => {
        t2.evaluationOrderQuestionChildList.forEach(t3 => {
          t3.evaluationOrderQuestionChildList.forEach(t4 => {
            t4.evaluationOrderQuestionAnswerVoList.forEach(a => {
              if (a.answerParentId === item.answerParentId) {
                if (a.answerId === item.answerId) {
                  if (a.answerSelfEvaluatorSelect === 0) {
                    a.answerSelfEvaluatorSelect = 1
                  } else {
                    a.answerSelfEvaluatorSelect = 0
                  }
                } else if (titleType !== 2) {
                  a.answerSelfEvaluatorSelect = 1
                }
              } else {
                return false
              }
            })
          })
        })
      })
    })

    test.evaluationOrderQuestionAnswerVoList.forEach(t1 => {
      if (titleType !== 2) {
        if (t1.answerId === item.answerId) {
          if (t1.answerSelfEvaluatorSelect === 0) {
            answerIds = item.answerId
          }
        }
      } else {
        if (t1.answerSelfEvaluatorSelect === 0) {
          answerIds += item.answerId + ','
        }
      }
    })

    answerIds = answerIds.endsWith(',') ? answerIds.substr(0, answerIds.length - 1) : answerIds
    console.log('answerIds', answerIds)
    ajax.post('submitAnswer', { titleId: test.id, answerValue: answerIds }).then(result => {
      // console.log('submitAnswer2', result.data)
    })
  }

  isAnswered(iiiitem) {
    let isAnswered = false
    iiiitem.evaluationOrderQuestionAnswerVoList.forEach(item => {
      if (item.answerSelfEvaluatorSelect === 0) {
        isAnswered = true
      }
    })

    return isAnswered
  }

  choiceClass(item) {
    const isAnswered = item.answerSelfEvaluatorSelect === 0
    return isAnswered ? 'choice_item current_item' : 'choice_item'
  }

  pre() {
    if (this.currentIndex >= 2) {
      this.currentIndex--
      if (document.getElementById('item' + this.currentIndex)) {
        document.getElementById('item' + this.currentIndex).click()
      }
    }
  }

  next() {
    if (this.test.isNeccssaryLevel === 0) {
      let answered = false
      this.test.evaluationOrderQuestionAnswerVoList.forEach(t1 => {
        if (t1.answerSelfEvaluatorSelect === 0) {
          answered = true
        }
      })
      if (!answered && !this.isSubmited) {
        this.$Modal.error({
          title: '提示',
          content: '此题为必答题，请答题之后再进入一下道题'
        })
        return
      }
    }
    if (document.getElementById('item' + (this.currentIndex + 1))) {
      this.currentIndex++
      document.getElementById('item' + this.currentIndex).click()
    }
  }

  currentChoice = ''
  examlist = []
  evaluatorState = Object

  setTestItem(item, iitem, iiitem, iiiitem) {
    if (this.test.id !== iiiitem.id && this.test.index < iiiitem.index) {
      if (this.test.isNeccssaryLevel === 0) {
        let answered = false
        this.test.evaluationOrderQuestionAnswerVoList.forEach(t1 => {
          if (t1.answerSelfEvaluatorSelect === 0) {
            answered = true
          }
        })
        if (!answered && !this.isSubmited) {
          this.$Modal.error({
            title: '提示',
            content: '当前题为必答题，请答题之后再切换其他题目'
          })
          return
        }
      }
    }

    console.log('iiiitem', iiiitem)
    this.test = iiiitem
    this.test = _.merge({
      test1: item.titleSeq + '、' + item.evaluationTitle,
      test2: iitem.evaluationTitle === '' ? '' : iitem.titleSeq + ' ' + iitem.evaluationTitle,
      test3: iiitem.evaluationTitle === '' ? '' : iiitem.titleSeq + ' ' + iiitem.evaluationTitle,
      test4: iiiitem.evaluationTitle === '' ? '' : iiiitem.titleSeq + ' ' + iiiitem.evaluationTitle
    }, this.test)
    this.currentIndex = iiiitem.index
  }

  // get evaluatorState() {
  //   const evaluatorStates = this.$store.state.session.evaluatorStates || {}
  //   console.log('this.$store.state.session.evaluatorStates', this.$store.state.session.evaluatorStates)
  //   return evaluatorStates
  // }

  @Watch('$route')
  onChildChanged(newVal, oldVal) {
    if (oldVal.path === '/LevelTest') {
    } else {
      this.evaluatorState = this.$store.state.session.evaluatorStates || {}
      this.fetchData()
    }
  }

  fetchData() {
    if (this.evaluatorState.evaluation_state === 2 || this.evaluatorState.evaluation_state === 3 || this.evaluatorState.evaluation_state === 4) {
      this.isSubmited = true
      ajax.post('viewEvaluatorHistoryData').then(result => {
        const level = result.data.data.evaluationLevel
        this.examlist = result.data.data.evaluationOrderQuestionParentVoList
        this.operateResult(level, 0)
      })
    } else {
      const query = this.$route.query
      const level = query && query.level ? query.level : 3
      const param = { level: level }
      ajax.post('startExam', param).then(result => {
        const currentTitileId = result.data.data.currentTitileId
        this.examlist = result.data.data.evaluationOrderQuestionParentVos
        this.operateResult(level, currentTitileId)
      })
    }
  }

  created() {
    this.evaluatorState = this.$store.state.session.evaluatorStates || {}
    this.fetchData()
  }

  operateResult(level, currentTitileId) {
    this.title = '养老机构等级划分系统测评-' + level + '级问卷'
    let index = 1
    this.examlist.forEach(t1 => {
      // console.log('t1', t1)
      t1.evaluationOrderQuestionChildList.forEach(t2 => {
        // console.log('t2', t2)
        t2.evaluationOrderQuestionChildList.forEach(t3 => {
          // console.log('t3', t3)
          t3.evaluationOrderQuestionChildList.forEach(t4 => {
            // console.log('t4', t4)
            t4.index = index
            index++
          })
        })
      })
    })

    this.examlist.forEach(t1 => {
      // console.log('t1', t1)
      t1.evaluationOrderQuestionChildList.forEach(t2 => {
        // console.log('t2', t2)
        t2.evaluationOrderQuestionChildList.forEach(t3 => {
          // console.log('t3', t3)
          t3.evaluationOrderQuestionChildList.forEach(t4 => {
            // console.log('t4', t4)
            // const currentTitileId = result.data.data.currentTitileId
            if ((currentTitileId > 0 && t4.id === currentTitileId) || this.currentIndex === t4.index) {
              this.setTestItem(t1, t2, t3, t4)
            } else if (currentTitileId === 0 && t4.index === 1) {
              this.setTestItem(t1, t2, t3, t4)
            }
          })
        })
      })
    })
  }

  submit() {
    this.$Modal.confirm({
      title: '确认',
      content: '确认要提交问卷吗',
      onOk: () => {
        ajax.post('commitEvaluator').then(result => {
          if (result.data.code === 200) {
            ajax.post('evaluatorState').then(r => {
              this.$store.commit('session/setEvaluatorStates', r.data.data)
              this.$Message.success('提交成功')
              this.$router.push('/User?id=4')
              location.reload()
            })
          }
        })
      },
      onCancel: () => {
        this.$Message.info('取消成功')
      }
    })
  }
}

</script>
<style scoped>
.operate_item {
  margin-right: 20px;
  width: 160px;
}
.operate {
  margin: 4rem auto;
  width: 70%;
  text-align: center;
}
.choice {
  margin: 2rem 0;
}
.choice_item {
  margin: 5px;
}

.test_field,
.progress_field {
  padding: 1rem;
}
.progress_container {
  max-height: 500px;
  overflow: scroll;
}
.test1 {
  font-weight: 600;
  font-size: 1.4rem;
}
.test2 {
  font-weight: 600;
  font-size: 1.3rem;
  padding: 0.5rem 0;
}
.test3 {
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
}
.test4 {
  font-size: 1.2rem;
}
.test4_item {
  padding-top: 0.8rem;
}

.progress_title {
  padding: 0.5rem 0;
  font-size: 1.2rem;
}
.progress_title1 {
  font-size: 1.2rem;
}
.progress_title2 {
  font-size: 1.2rem;
}
.progress {
  padding: 0.5rem 0;
}
.progress_item {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 4px;
  width: 20px;
  height: 20px;
  border: solid 1px #e5e5e5;
  text-align: center;
  line-height: 20px;
  border-radius: 5px;
}
.progress_item:hover {
  cursor: pointer;
}
.current_progess_item2 {
  background: #00b04e;
  color: #fff;
}
.current_progess_item {
  border: solid 1px #00b04e;
  color: #999;
}
.current_item {
  background: #00b04e;
  color: #fff;
}
.body {
  text-align: left;
  padding: 1rem 10% 4rem 20%;
}
</style>
